<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

	<title>BorderContainer Test (steel)</title>

	<link rel="stylesheet" href="../../../../dojo/dojo/resources/dojo.css">
	<link rel="stylesheet" href="../../../../dojo/dijit/tests/css/dijitTests.css">
	<style type="text/css">
	.widgetContainer {
		padding-top: 10px;
	}
	.testTitle {
		padding-bottom: 10px;
	}
	
	body {
		padding-top: 60px;
	}
	.dojoTabPane {
		padding : 10px 10px 10px 10px;
		overflow: auto;
	}

	.somePadding .dijitAccordionBody {
		padding: 5px;
	}
	.extremePadding .dijitAccordionBody {
		padding: 50px;
	}
	
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../themes/steel/SteelBase.css">

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../../dojo/dojo/dojo.js"
		djConfig="parseOnLoad: true, isDebug: true"></script>

	<!-- not needed, for testing alternate themes -->
	<script type="text/javascript" src="../../../../dojo/dijit/tests/_testCommon.js"></script>

	<script language="JavaScript" type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.layout.TabContainer");
		dojo.require("dijit.layout.SplitContainer");
		dojo.require("dijit.layout.BorderContainer");
		dojo.require("dijit.Tooltip");
		dojo.require("dijit.layout.LinkPane");
		dojo.require("dijit.form.Button");
		dojo.require("dojo.parser"); // scan page for widgets
		function testClose(pane,tab){
		  return confirm("Please confirm that you want tab "+tab.title+" closed");
		}

		startTime = new Date();
		dojo.addOnLoad(function(){
			var elapsed = new Date().getTime() - startTime;
			var p = document.createElement("p");
			p.appendChild(document.createTextNode("Widgets loaded in " + elapsed + "ms"));
			document.body.appendChild(p);
		});

		var progTabCounter = 1;
		function makeTab(){
			var tc = dijit.byId("mainTabContainer");
			var cp = new dijit.layout.ContentPane({
				title: 'Programmatically created tab ' + (progTabCounter++) ,
				closable: true
			});
			cp.domNode.innerHTML = "I was created programmatically!";
			tc.addChild(cp, 0);
		}
		function myHandler(id,newValue){
			console.debug("onChange for id = " + id + ", value: " + newValue);
		}
	</script>

</head>
<body class="steel">
	<h1 class="testTitle">Dijit layout.TabContainer tests</h1>

	<p>These tabs are made up of local and external content. Tab 1 and Tab 2 are loading
	files tab1.html and tab2.html. Tab 3 and Another Tab are using content that is already
	part of this page.   Tab2 is initially selected. Attribute tabStrip is set to true
	</p>

	<p>
		More tabs can be displayed in the first two TabContainers by clicking the
		drop down control to the right of the widget.  If the tabs are not wider than
		the widget, the scrolling controls should disappear - this can be tested by closing the
		closable tabs.
	</p>

	<button id="firstButton" dojoType="dijit.form.Button" onclick="makeTab()">Click To Add Tab</button>

	<br><br>

	<div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
				persist="true" tabStrip="true" style="width: 400px;height: 20em;">

		<div id="tab1" dojoType="dijit.layout.ContentPane" href="samples/tab1.html" title="Tab 1" iconClass="plusIcon"
			tooltip="Tooltip for tab #1"></div>

		<div id="tab2" dojoType="dijit.layout.ContentPane" href="samples/tab2.html" refreshOnShow="true" title="Tab 2" iconClass="noteIcon" selected="true"></div>

		<div dojoType="dijit.layout.ContentPane" id="tab3" title="Tab 3"
				iconClass="dijitEditorIcon dijitEditorIconSave" closable="true">
			<h1>I am tab 3</h1>
			<p>And I was already part of the page! That's cool, no?</p>

			<p id="foo">tooltip on this paragraph</p>
			<div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div>
			<button dojoType="dijit.form.Button">I'm a button </button>
			<br>
			<button dojoType="dijit.form.Button">So am I!</button>
			<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
			semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
			porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
			Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
			Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
			risus.
			</p>

			<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
			imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
			nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
			massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
			pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
			quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
			felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
			quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
			rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
			semper velit ante id metus. Praesent massa dolor, porttitor sed,
			pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
			tortor pharetra congue. Suspendisse pulvinar.
			</p>
		</div>

		<div dojoType="dijit.layout.TabContainer" id="inlined" title="Inlined Sub TabContainer" iconClass="plusIcon" nested="true">
			<a dojoType="dijit.layout.LinkPane" id="tab1href" href="samples/tab1.html" onLoad="console.log('load of SubTab 1');" iconClass="plusIcon" >SubTab 1</a>
			<a dojoType="dijit.layout.LinkPane" id="tab2href" href="samples/tab2.html"  onLoad="console.log('load of SubTab 2');" selected="true"  iconClass="dijitEditorIcon dijitEditorIconSave">SubTab 2</a>
			<div dojoType="dijit.layout.ContentPane" id="subtab3" title="SubTab 3"  iconClass="dijitEditorIcon dijitEditorIconCut">
				<h1>I am tab 3, inlined.</h1>

			</div>
			<div dojoType="dijit.layout.ContentPane" id="subtab4" title="SubTab 4" iconClass="dijitEditorIcon dijitEditorIconCopy">
				<h1>I am tab 4, inlined.</h1>
			</div>
		</div>

		<a dojoType="dijit.layout.LinkPane" id="tab3href" href="samples/tab3.html" refreshOnShow="true" closable="true"
				style="padding: 0" iconClass="dijitEditorIcon dijitEditorIconSave">Sub TabContainer from href</a>
		<a dojoType="dijit.layout.LinkPane" id="tab4href" href="samples/tab4.html"
				closable="true" iconClass="dijitEditorIcon dijitEditorIconCut">SplitContainer from href</a>

		<div dojoType="dijit.layout.ContentPane" id="embedded" title="Embedded layout widgets"
				closable="true" iconClass="dijitEditorIcon dijitEditorIconCopy">
			<p>
				The tab has some text, plus two embedded layout widgets, which should
				appear correctly even though the tab is initially hidden.
			</p>
			<p>
				Here's a BorderContainer:
			</p>
			<div dojoType="dijit.layout.BorderContainer" id="bc" style="height:200px; width:300px">
				<div dojoType="dijit.layout.ContentPane" region="left" style="width:100px" splitter="true">
					1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>

				<div dojoType="dijit.layout.ContentPane" region="center">
					2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
			</div>
			<p>
				And a TabContainer:
			</p>
			<div dojoType="dijit.layout.TabContainer" id="embeddedTC" style="height:200px; width:300px">
				<div dojoType="dijit.layout.ContentPane" id="embeddedTab1" title="Tab 1">
					1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>

				<div dojoType="dijit.layout.ContentPane" id="embeddedTab2" title="Tab 2">
					2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
			</div>
			<p>
				Text after the widgets.
			</p>
		</div>
	</div>
	<br><br>
	<button dojoType="dijit.form.Button" onclick="dijit.byId('tab1').set('title', 'Tab 1 Renamed');">Rename Tab #1</button>
	<button dojoType="dijit.form.Button" onclick="dijit.byId('tab2').set('title', 'Tab 2 Renamed To Something Very Long');">Rename Tab #2</button>
	<button dojoType="dijit.form.Button" onclick="dijit.byId('tab1').set('closable', !dijit.byId('tab1').get('closable'));">Toggle Tab #1 closable</button>
	<br/>
	<p>
		This tab container has the Menu function for selecting tabs disabled, using <b>useMenu="false"</b>

	</p>

	<div dojoType="dijit.layout.TabContainer" useMenu="false"
				persist="false" tabStrip="true" style="width: 400px;height: 20em;">
		<div  dojoType="dijit.layout.ContentPane" href="samples/tab1.html" title="Tab 1"></div>


		<div  dojoType="dijit.layout.ContentPane" href="samples/tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div>

		<div dojoType="dijit.layout.ContentPane"  title="Tab 3" closable="true">
			<h1>I am tab 3</h1>

			<p>And I was already part of the page! That's cool, no?</p>
			<p id="foo">tooltip on this paragraph</p>
			<div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div>
			<button dojoType="dijit.form.Button">I'm a button </button>
			<br>
			<button dojoType="dijit.form.Button">So am I!</button>

			<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
			semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
			porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
			Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
			Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
			risus.
			</p>
			<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
			imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
			nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
			massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
			pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
			quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
			felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
			quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
			rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
			semper velit ante id metus. Praesent massa dolor, porttitor sed,
			pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
			tortor pharetra congue. Suspendisse pulvinar.
			</p>
		</div>

		<div dojoType="dijit.layout.TabContainer"  closable="true" title="Inlined Sub TabContainer" nested="true">
			<a dojoType="dijit.layout.LinkPane"  href="samples/tab1.html" onLoad="console.log('load of SubTab 1');">SubTab 1</a>
			<a dojoType="dijit.layout.LinkPane"  href="samples/tab2.html"  onLoad="console.log('load of SubTab 2');" selected="true">SubTab 2</a>

			<div dojoType="dijit.layout.ContentPane"  title="SubTab 3">
				<h1>I am tab 3, inlined.</h1>
			</div>
			<div dojoType="dijit.layout.ContentPane"  title="SubTab 4">
				<h1>I am tab 4, inlined.</h1>
			</div>
		</div>

		<a dojoType="dijit.layout.LinkPane"  href="samples/tab3.html" closable="true" refreshOnShow="true" style="padding: 0">Sub TabContainer from href</a>

		<a dojoType="dijit.layout.LinkPane"  closable="true" href="samples/tab4.html">SplitContainer from href</a>

		<div dojoType="dijit.layout.ContentPane"  closable="true" title="Embedded layout widgets">
			<p>
				The tab has some text, plus two embedded layout widgets, which should
				appear correctly even though the tab is initially hidden.
			</p>
			<p>

				Here's a BorderContainer:
			</p>
			<div dojoType="dijit.layout.BorderContainer" style="height:200px; width:300px">
				<div dojoType="dijit.layout.ContentPane" region="left" style="width:100px" splitter="true">
					1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
				<div dojoType="dijit.layout.ContentPane" region="center">
					2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
			</div>

			<p>
				And a TabContainer:
			</p>
			<div dojoType="dijit.layout.TabContainer"  style="height:200px; width:300px">
				<div dojoType="dijit.layout.ContentPane" title="Tab 1">
					1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
				<div dojoType="dijit.layout.ContentPane" title="Tab 2">
					2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>

			</div>
			<p>
				Text after the widgets.
			</p>
		</div>
	</div>


	<br/>

	<p>Tabs w/only icons (except in high-contrast mode where labels display):</p>

	<div id="iconTabs" dojoType="dijit.layout.TabContainer" tabPosition="top" style="width: 100%; height: 10em;">
		<div id="iconTab1" dojoType="dijit.layout.ContentPane" title="Cut" tooltip="tooltip for cut button" showTitle="false" iconClass="dijitEditorIcon dijitEditorIconCut">Cut icon tab</div>
		<div id="iconTab2" dojoType="dijit.layout.ContentPane" title="Copy" showTitle="false" iconClass="dijitEditorIcon dijitEditorIconCopy">Copy icon tab</div>
		<div id="iconTab3" dojoType="dijit.layout.ContentPane" title="Paste" showTitle="false" iconClass="dijitEditorIcon dijitEditorIconPaste">Paste icon tab</div>
	</div>


	<p>

		This tab container has the Slider function for selecting tabs disabled, using <b>useSlider="false"</b>
	</p>
	<div dojoType="dijit.layout.TabContainer" useSlider="false"
				persist="false" tabStrip="true" style="width: 400px;height: 20em;">

		<div  dojoType="dijit.layout.ContentPane" href="samples/tab1.html" title="Tab 1"></div>

		<div  dojoType="dijit.layout.ContentPane" href="samples/tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div>

		<div dojoType="dijit.layout.ContentPane"  title="Tab 3" closable="true">

			<h1>I am tab 3</h1>
			<p>And I was already part of the page! That's cool, no?</p>
			<p id="foo">tooltip on this paragraph</p>
			<div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div>
			<button dojoType="dijit.form.Button">I'm a button </button>
			<br>

			<button dojoType="dijit.form.Button">So am I!</button>
			<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
			semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
			porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
			Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
			Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
			risus.
			</p>
			<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
			imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
			nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
			massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
			pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
			quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
			felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
			quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
			rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
			semper velit ante id metus. Praesent massa dolor, porttitor sed,
			pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
			tortor pharetra congue. Suspendisse pulvinar.
			</p>
		</div>

		<div dojoType="dijit.layout.TabContainer"  closable="true" title="Inlined Sub TabContainer" nested="true">
			<a dojoType="dijit.layout.LinkPane"  href="samples/tab1.html" onLoad="console.log('load of SubTab 1');">SubTab 1</a>

			<a dojoType="dijit.layout.LinkPane"  href="samples/tab2.html"  onLoad="console.log('load of SubTab 2');" selected="true">SubTab 2</a>
			<div dojoType="dijit.layout.ContentPane"  title="SubTab 3">
				<h1>I am tab 3, inlined.</h1>
			</div>
			<div dojoType="dijit.layout.ContentPane"  title="SubTab 4">
				<h1>I am tab 4, inlined.</h1>
			</div>

		</div>

		<a dojoType="dijit.layout.LinkPane"  href="tab3.html" closable="true" refreshOnShow="true" style="padding: 0">Sub TabContainer from href</a>

		<a dojoType="dijit.layout.LinkPane"  closable="true" href="samples/tab4.html">SplitContainer from href</a>

		<div dojoType="dijit.layout.ContentPane"  closable="true" title="Embedded layout widgets">
			<p>
				The tab has some text, plus two embedded layout widgets, which should
				appear correctly even though the tab is initially hidden.
			</p>

			<p>
				Here's a BorderContainer:
			</p>
			<div dojoType="dijit.layout.BorderContainer" style="height:200px; width:300px">
				<div dojoType="dijit.layout.ContentPane" region="left" style="width:100px" splitter="true">
					1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
				<div dojoType="dijit.layout.ContentPane" region="center">
					2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>

			</div>
			<p>
				And a TabContainer:
			</p>
			<div dojoType="dijit.layout.TabContainer"  style="height:200px; width:300px">
				<div dojoType="dijit.layout.ContentPane" title="Tab 1">
					1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
				<div dojoType="dijit.layout.ContentPane" title="Tab 2">
					2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>

			</div>
			<p>
				Text after the widgets.
			</p>
		</div>
	</div>
	<br/>
	<p>
		This tab container has the tab strip disabled, using <b>tabStrip="false"</b>

	</p>
	<div dojoType="dijit.layout.TabContainer" tabStrip="false"
				persist="false" tabStrip="true" style="width: 400px;height: 20em;">

		<div  dojoType="dijit.layout.ContentPane" href="samples/tab1.html" title="Tab 1"></div>

		<div  dojoType="dijit.layout.ContentPane" href="samples/tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div>

		<div dojoType="dijit.layout.ContentPane"  title="Tab 3" closable="true">
			<h1>I am tab 3</h1>
			<p>And I was already part of the page! That's cool, no?</p>

			<p id="foo">tooltip on this paragraph</p>
			<div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div>
			<button dojoType="dijit.form.Button">I'm a button </button>
			<br>
			<button dojoType="dijit.form.Button">So am I!</button>
			<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
			semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
			porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
			Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
			Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
			risus.
			</p>

			<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
			imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
			nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
			massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
			pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
			quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
			felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
			quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
			rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
			semper velit ante id metus. Praesent massa dolor, porttitor sed,
			pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
			tortor pharetra congue. Suspendisse pulvinar.
			</p>
		</div>

		<div dojoType="dijit.layout.TabContainer"  closable="true" title="Inlined Sub TabContainer" nested="true">
			<a dojoType="dijit.layout.LinkPane"  href="samples/tab1.html" onLoad="console.log('load of SubTab 1');">SubTab 1</a>
			<a dojoType="dijit.layout.LinkPane"  href="samples/tab2.html"  onLoad="console.log('load of SubTab 2');" selected="true">SubTab 2</a>
			<div dojoType="dijit.layout.ContentPane"  title="SubTab 3">
				<h1>I am tab 3, inlined.</h1>

			</div>
			<div dojoType="dijit.layout.ContentPane"  title="SubTab 4">
				<h1>I am tab 4, inlined.</h1>
			</div>
		</div>

		<a dojoType="dijit.layout.LinkPane"  href="samples/tab3.html" closable="true" refreshOnShow="true" style="padding: 0">Sub TabContainer from href</a>

		<a dojoType="dijit.layout.LinkPane"  closable="true" href="samples/tab4.html">SplitContainer from href</a>

		<div dojoType="dijit.layout.ContentPane"  closable="true" title="Embedded layout widgets">
			<p>
				The tab has some text, plus two embedded layout widgets, which should
				appear correctly even though the tab is initially hidden.
			</p>
			<p>
				Here's a BorderContainer:
			</p>
			<div dojoType="dijit.layout.BorderContainer" style="height:200px; width:300px">
				<div dojoType="dijit.layout.ContentPane" region="left" style="width:100px" splitter="true">

					1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
				<div dojoType="dijit.layout.ContentPane" region="center">
					2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
			</div>
			<p>
				And a TabContainer:
			</p>
			<div dojoType="dijit.layout.TabContainer"  style="height:200px; width:300px">

				<div dojoType="dijit.layout.ContentPane" title="Tab 1">
					1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
				<div dojoType="dijit.layout.ContentPane" title="Tab 2">
					2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
			</div>
			<p>
				Text after the widgets.
			</p>

		</div>
	</div>

	<p>These tabs are made up of local and external content. Tab 1 and Tab 2 are loading
	files tab1.html and tab2.html. Tab 3 and Another Tab are using content that is already
	part of this page.   Tab2 is initially selected. Attribute tabStrip is set to true,
	and the tabPosition is "bottom"
	</p>

	<div id="mainTabContainerBottom" dojoType="dijit.layout.TabContainer" tabPosition="bottom"
				persist="true" tabStrip="true" style="width: 400px; height: 20em;">

		<div dojoType="dijit.layout.ContentPane" href="samples/tab1.html" title="Tab 1"></div>

		<div dojoType="dijit.layout.ContentPane" href="samples/tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div>

		<div dojoType="dijit.layout.ContentPane" closable="true" title="Tab 3">
			<h1>I am tab 3</h1>
			<p>And I was already part of the page! That's cool, no?</p>
			<p id="foo">tooltip on this paragraph</p>
			<div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div>
			<button dojoType="dijit.form.Button">I'm a button </button>

			<br>
			<button dojoType="dijit.form.Button">So am I!</button>
			<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
			semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
			porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
			Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
			Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
			risus.
			</p>
			<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
			imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
			nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
			massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
			pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
			quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
			felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
			quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
			rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
			semper velit ante id metus. Praesent massa dolor, porttitor sed,
			pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
			tortor pharetra congue. Suspendisse pulvinar.
			</p>
		</div>

		<div dojoType="dijit.layout.TabContainer" closable="true" title="Inlined Sub TabContainer" nested="true">

			<a dojoType="dijit.layout.LinkPane"  href="samples/tab1.html" onLoad="console.log('load of SubTab 1');">SubTab 1</a>
			<a dojoType="dijit.layout.LinkPane"  href="samples/tab2.html"  onLoad="console.log('load of SubTab 2');" selected="true">SubTab 2</a>
			<div dojoType="dijit.layout.ContentPane"  title="SubTab 3">
				<h1>I am tab 3, inlined.</h1>
			</div>
			<div dojoType="dijit.layout.ContentPane"  title="SubTab 4">
				<h1>I am tab 4, inlined.</h1>

			</div>
		</div>

		<a dojoType="dijit.layout.LinkPane" closable="true" href="samples/tab3.html" refreshOnShow="true" style="padding: 0">Sub TabContainer from href</a>

		<a dojoType="dijit.layout.LinkPane" closable="true" href="samples/tab4.html">SplitContainer from href</a>

		<div dojoType="dijit.layout.ContentPane" closable="true" title="Embedded layout widgets">
			<p>

				The tab has some text, plus two embedded layout widgets, which should
				appear correctly even though the tab is initially hidden.
			</p>
			<p>
				Here's a BorderContainer:
			</p>
			<div dojoType="dijit.layout.BorderContainer" style="height:200px; width:300px">
				<div dojoType="dijit.layout.ContentPane" region="left" style="width:100px" splitter="true">
					1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
				<div dojoType="dijit.layout.ContentPane" region="center">

					2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
			</div>
			<p>
				And a TabContainer:
			</p>
			<div dojoType="dijit.layout.TabContainer" style="height:200px; width:300px">
				<div dojoType="dijit.layout.ContentPane" title="Tab 1">
					1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>

				<div dojoType="dijit.layout.ContentPane" title="Tab 2">
					2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
			</div>
			<p>
				Text after the widgets.
			</p>
		</div>
	</div>
	<br>

	<p>
		This tab container has its tabs at the bottom, and the tab strip disabled
	</p>

	<div dojoType="dijit.layout.TabContainer" tabPosition="bottom"
				persist="true" tabStrip="false" style="width: 400px; height: 20em;">

		<div dojoType="dijit.layout.ContentPane" href="samples/tab1.html" title="Tab 1"></div>

		<div dojoType="dijit.layout.ContentPane" href="samples/tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div>

		<div dojoType="dijit.layout.ContentPane" closable="true" title="Tab 3">

			<h1>I am tab 3</h1>
			<p>And I was already part of the page! That's cool, no?</p>
			<p id="foo">tooltip on this paragraph</p>
			<div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div>
			<button dojoType="dijit.form.Button">I'm a button </button>
			<br>

			<button dojoType="dijit.form.Button">So am I!</button>
			<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
			semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
			porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
			Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
			Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
			risus.
			</p>
			<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
			imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
			nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
			massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
			pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
			quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
			felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
			quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
			rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
			semper velit ante id metus. Praesent massa dolor, porttitor sed,
			pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
			tortor pharetra congue. Suspendisse pulvinar.
			</p>
		</div>

		<div dojoType="dijit.layout.TabContainer" closable="true" title="Inlined Sub TabContainer" nested="true">
			<a dojoType="dijit.layout.LinkPane"  href="samples/tab1.html" onLoad="console.log('load of SubTab 1');">SubTab 1</a>

			<a dojoType="dijit.layout.LinkPane"  href="samples/tab2.html"  onLoad="console.log('load of SubTab 2');" selected="true">SubTab 2</a>
			<div dojoType="dijit.layout.ContentPane"  title="SubTab 3">
				<h1>I am tab 3, inlined.</h1>
			</div>
			<div dojoType="dijit.layout.ContentPane"  title="SubTab 4">
				<h1>I am tab 4, inlined.</h1>
			</div>

		</div>

		<a dojoType="dijit.layout.LinkPane" closable="true" href="samples/tab3.html" refreshOnShow="true" style="padding: 0">Sub TabContainer from href</a>

		<a dojoType="dijit.layout.LinkPane" closable="true" href="samples/tab4.html">SplitContainer from href</a>

		<div dojoType="dijit.layout.ContentPane" closable="true" title="Embedded layout widgets">
			<p>
				The tab has some text, plus two embedded layout widgets, which should
				appear correctly even though the tab is initially hidden.
			</p>

			<p>
				Here's a BorderContainer:
			</p>
			<div dojoType="dijit.layout.BorderContainer" style="height:200px; width:300px">
				<div dojoType="dijit.layout.ContentPane" region="left" style="width:100px" splitter="true">
					1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
				<div dojoType="dijit.layout.ContentPane" region="center">
					2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>

			</div>
			<p>
				And a TabContainer:
			</p>
			<div dojoType="dijit.layout.TabContainer" style="height:200px; width:300px">
				<div dojoType="dijit.layout.ContentPane" title="Tab 1">
					1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>
				<div dojoType="dijit.layout.ContentPane" title="Tab 2">
					2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
					Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
					vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
					augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
					metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
					ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
					euismod, magna nulla viverra libero, sit amet lacinia odio diam id
					risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
					porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
					faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
					consequat quis, varius interdum, nulla. Donec neque tortor,
					sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
					ut eros sit amet ante pharetra interdum.
				</div>

			</div>
			<p>
				Text after the widgets.
			</p>
		</div>
	</div>

	<p>
		The next example is with closable tabs.
		Tab 1 and Tab 3 can be closed; Tab 3 has a confirm box.
	</p>

	<div id="ttabs" dojoType="dijit.layout.TabContainer" tabPosition="top" style="width: 100%; height: 10em;"
		onfocus="console.log('user focus handler')"
		onblur="console.log('user blur handler')"
	>
		<div id="ttab1" dojoType="dijit.layout.ContentPane" href="samples/tab1.html" title="First" closable="true"></div>
		<div id="ttab2" dojoType="dijit.layout.ContentPane" href="samples/tab2.html" refreshOnShow="true" title="Second"></div>
		<div dojoType="dijit.layout.ContentPane" title="Third" onClose="testClose" closable="true">
			<h1>I am tab 3</h1>
			<p>And I was already part of the page! That's cool, no?</p>
			<p>If you try to close me there should be a confirm dialog.</p>

		</div>
	</div>

	<p>Tabs with titles on the bottom:</p>

	<div id="btabs" dojoType="dijit.layout.TabContainer" tabPosition="bottom" style="width: 100%; height: 10em;">
		<div id="btab1" dojoType="dijit.layout.ContentPane" href="samples/tab1.html" title="Tab 1" closable="true"></div>
		<div id="btab2" dojoType="dijit.layout.ContentPane" href="samples/tab2.html" refreshOnShow="true" onLoad="console.debug('Tab2 onLoad');" title="Tab 2"></div>
	</div>

	<p>Tabs with titles on the left and tabStrip="false":</p>

	<div id="ltabs" dojoType="dijit.layout.TabContainer" style="width:500px;height:100px" tabStrip="false" tabPosition="left-h">
		<div id="LittleRed1" dojoType="dijit.layout.ContentPane" title="Little Red Cap">
			Once upon a time there was a dear little girl who was loved by
			every one who looked at her, but most of all by her grandmother,
			and there was nothing that she would not have given to the child.
		</div>
		<div id="HanselGretel1" dojoType="dijit.layout.ContentPane"
		     title="Hansel and Gretel" closable="true" selected="true">
			Hard by a great forest dwelt a poor wood-cutter with his wife
			and his two children. The boy was called Hansel and the girl Gretel.
			He had little to bite and to break, and once when great dearth fell
			on the land, he could no longer procure even daily bread.
		</div>

		<div id="GreenTwigs1" dojoType="dijit.layout.ContentPane"
		 title="The Three Green Twigs">
			There was once upon a time a hermit who lived in a forest at the foot
			of a mountain, and passed his time in prayer and good works,
			and every evening he carried, to the glory of God, two pails of water
			up the mountain.
		</div>
	</div>

	<p>Tabs with titles on the left and tabStrip=true:</p>

	<div id="ltabsStrip" dojoType="dijit.layout.TabContainer" style="width:500px;height:100px" tabStrip="true" tabPosition="left-h">
		<div dojoType="dijit.layout.ContentPane" title="Little Red Cap">
			Once upon a time there was a dear little girl who was loved by
			every one who looked at her, but most of all by her grandmother,
			and there was nothing that she would not have given to the child.
		</div>

		<div dojoType="dijit.layout.ContentPane"
		     title="Hansel and Gretel" closable="true" selected="true">
			Hard by a great forest dwelt a poor wood-cutter with his wife
			and his two children. The boy was called Hansel and the girl Gretel.
			He had little to bite and to break, and once when great dearth fell
			on the land, he could no longer procure even daily bread.
		</div>
		<div dojoType="dijit.layout.ContentPane"
		 title="The Three Green Twigs">
			There was once upon a time a hermit who lived in a forest at the foot
			of a mountain, and passed his time in prayer and good works,
			and every evening he carried, to the glory of God, two pails of water
			up the mountain.
		</div>
	</div>

	<p>Tabs with titles on the right and tabStrip=true:</p>

	<div id="rtabsStrip" dojoType="dijit.layout.TabContainer" tabStrip="true" style="width:500px;height:100px" tabPosition="right-h">
		<div id="LittleRed2" dojoType="dijit.layout.ContentPane" title="Little Red Cap">
			Once upon a time there was a dear little girl who was loved by
			every one who looked at her, but most of all by her grandmother,
			and there was nothing that she would not have given to the child.
		</div>
		<div id="HanselGretel2" dojoType="dijit.layout.ContentPane"
		     title="Hansel and Gretel" closable="true" selected="true">
			Hard by a great forest dwelt a poor wood-cutter with his wife
			and his two children. The boy was called Hansel and the girl Gretel.
			He had little to bite and to break, and once when great dearth fell
			on the land, he could no longer procure even daily bread.
		</div>
		<div id="GreenTwigs2" dojoType="dijit.layout.ContentPane"
		 title="The Three Green Twigs">
			There was once upon a time a hermit who lived in a forest at the foot
			of a mountain, and passed his time in prayer and good works,
			and every evening he carried, to the glory of God, two pails of water
			up the mountain.
		</div>

	</div>

	<p>Tabs with titles on the right and tabStrip=false:</p>

	<div id="rtabs" dojoType="dijit.layout.TabContainer" tabStrip="false" style="width:500px;height:100px" tabPosition="right-h">
		<div dojoType="dijit.layout.ContentPane" title="Little Red Cap">
			Once upon a time there was a dear little girl who was loved by
			every one who looked at her, but most of all by her grandmother,
			and there was nothing that she would not have given to the child.
		</div>
		<div dojoType="dijit.layout.ContentPane"
		     title="Hansel and Gretel" closable="true" selected="true">
			Hard by a great forest dwelt a poor wood-cutter with his wife
			and his two children. The boy was called Hansel and the girl Gretel.
			He had little to bite and to break, and once when great dearth fell
			on the land, he could no longer procure even daily bread.
		</div>

		<div dojoType="dijit.layout.ContentPane"
		 title="The Three Green Twigs">
			There was once upon a time a hermit who lived in a forest at the foot
			of a mountain, and passed his time in prayer and good works,
			and every evening he carried, to the glory of God, two pails of water
			up the mountain.
		</div>
	</div>
</body>
</html>